import {React} from 'react';
import { Menu } from 'antd';

import { useNavigate,Outlet,useLocation } from 'react-router-dom'


const items = [
  {
    key: '/all',
    label: '全部文章'
    ,
  },
  {
    key: '/all/before',
    label: '前端',
  },
  {
    key: '/all/after',
    label: '后端',
  },
  {
    key: '/all/other',
    label: '其他',
  }]

const Home = () => {
  const navigate = useNavigate()
  const onMenuClick=(route)=>{
    const path = route.key
    navigate(path)
  }
  //反向高亮
  const location = useLocation();
  const selectkey  =location.pathname
  
    return (
      <div style={{backgroundColor:'white'}}>
        <Menu
            mode="horizontal"
            selectedKeys={selectkey}
            onClick={onMenuClick}
            items={items}
            ></Menu>
            <Outlet></Outlet>
 </div>)
};
export default Home;